<template>
	<div class="bg-light">
		<headers :title="'商品详情页'"></headers>
		<van-swipe @change="onChange" :autoplay="3000">
			<van-swipe-item v-for="value in content.goods_images" :key="value.file_id">
				<img class="img-fluid mx-auto d-block" v-lazy="value.external_url" />
			  </van-swipe-item>
			<template #indicator>
			  <div class="custom-indicator" v-if="content.goods_images">{{ current + 1 }}/ {{ content.goods_images.length }} </div>
			</template>
		  </van-swipe>
		<div class="mx-2">
			<div class="d-flex justify-content-between">
				<div>
					<span style="color: #ff6315; font-size: 40px;">￥{{ content.goods_price_max }}</span> <s class="text-secondary"> {{ content.line_price_max === "0.00" ? "" : `￥${content.line_price_max}` }} </s>
				</div>
				<span class="my-auto text-secondary"> 已售 {{ content.goods_sales }} 件</span>
			</div>
			<div class="name my-3">
				{{ content.goods_name }}
			</div>
			<div>
			<van-cell is-link @click="show = true" style="background-color: #e8e8e883;">
				<span class="mr-3">
					<van-icon name="passed" size="25" color="#FA2228"></van-icon>
					七天无理由退款
				</span>
				<span>
					<van-icon name="passed" size="25" color="#FA2228"></van-icon>
					48小时内发货
				</span>
			</van-cell>
				<van-action-sheet v-model="show" close-icon="cross" title="">
					<div class="p-5">
						<p class="mb-5">
							<van-icon name="passed" size="25" color="#FA2228"></van-icon> <span class="text-dark">七天无理由退款 </span><br>
							<span class="text-secondary">
								满足相应条件时，消费者可申请7天无理由退货
							</span>
						</p>
						<p>
							<van-icon name="passed" size="25" color="#FA2228"></van-icon> 48小时内发货 <br>
							<span class="text-secondary">
								下单后在48小时之内发货，否则将不支持退款
							</span>
						</p>
					</div>
				</van-action-sheet>
			</div>

			<div class="my-3">
				<van-cell :title="`商品评价(${commentCount.all})条`" is-link value="查看更多" :to="`/comment/${$route.params.id}`"></van-cell>
				<comment v-for="item in comment" :key="item.comment_id" :data="item"></comment>
			</div>

		</div>


		<div class=" my-3">
			<p class="mx-2">&ensp;商品描述</p>
			<div v-html="content.content"></div> 
		</div>

		<van-goods-action>
			<van-goods-action-icon icon="home-o" text="首页" to="/home" />
			<van-goods-action-icon icon="cart-o" :badge="cartTotal === 0 ? '' : cartTotal" text="购物车" to="/cart" />
			<van-goods-action-button
			  type="warning"
			  text="加入购物车"
			  @click="show1 = true;cart = true"

			/>
			<van-goods-action-button
			  type="danger"
			  text="立即购买"
			  @click="show1 = true;cart = false"
			/>
		  </van-goods-action>

		  <van-action-sheet v-model="show1" :title="'\u2008'">
			<div class="content">
				<div class="d-flex align-items-center">
					<van-icon :name="content.goods_image" size="200" color="#FA2228"></van-icon>
					<div>
						<h4 style="color:#ff6315">
							￥{{ content.goods_price_min }}
						</h4>
						<h6 class="text-secondary">
							库存 {{ content.stock_total }}
						</h6>
					</div>
				</div>
				<div class="d-flex justify-content-around align-items-center my-3">
					<p class="text-secondary my-auto">
						数量
					</p>
					<countNum v-model="num"></countNum>
					
				</div>
				
				<div class="sub mt-5 mb-3">
					<button class="btn d-block rounded-pill w-100 text-white py-3 bg-secondary" disabled v-if="content.stock_total <= 0">
						商品已被抢完
					</button>
					<button @click="addCart" class="btn d-block rounded-pill w-100 text-white py-3 bg-warning" v-else-if="cart">
						加入购物车
					</button>
					<button @click="addCart" class="btn d-block rounded-pill w-100 text-white py-3 bg-danger" v-else>
						立即购买
					</button>
				</div>
			</div>
		  </van-action-sheet>
	</div>
</template>

<script>
import headers from '@/components/header.vue'
import { goodsDetail,addCart } from '@/api/goodsDetail'
import { getCommentCount,getComment } from '@/api/productionDetail.js'
import comment from '@/components/comment.vue'
import countNum from '@/components/countNum.vue'
export default {
	name: 'AppDetail',
	async created() {
		//获取商品细节
		const {data:{
			detail
		}} = await goodsDetail(this.$route.params.id)
		this.content = detail
		console.log(detail);
		//获取评论总数
		const {data:{
			total
		}} = await getCommentCount(this.$route.params.id)
		this.commentCount = total
		//获取评论
		const {data:{
			list
		}} = await getComment(this.$route.params.id,3)
		this.comment = list
		//获取购物车总数
		await this.$store.dispatch('cart/getCartList')
		this.cartTotal = this.$store.state.cart.cartList.length
	},
	data:()=>{
		return{
			current:0,
			content:{},
			show:false,
			commentCount:{},
			comment:[],
			show1:false,
			num:1,
			cart:null,
			cartTotal:0
		}
	},
	components:{
		headers,
		comment,
		countNum
	},
	methods: {
		onChange(index) {
			this.current = index
		},
		async addCart() {
			if(!this.$store.getters.token){
				this.$dialog.confirm({
					title:"温馨提示",
					message:"你还未登录账号，登陆账号后方可继续进行操作哟~",
					theme: 'round-button',
					confirmButtonText:'去登录',
					cancelButtonText:'再逛逛'
				}).then(() => {
					this.$router.replace({
						path:'/login',
						query:{
							backUrl:this.$route.fullPath
						}
					})
				}).catch(() => {
					
				})
			}
			if(this.cart){
				await addCart(this.$route.params.id,this.num,this.content.skuList[0].goods_sku_id)
				this.show1 = false
				this.$toast('加入购物车成功')
			}else{
				this.$router.replace('/payment')
			}
		}
	}
}
</script>

<style scoped lang="less">
@import url('@/style/bootstrap.css');
.custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
  }
.name{
	font-size: 20px;
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
</style>